<template>
  <div>
    <div style="display: flex;justify-content: space-between;">
      <div style="width: 20%;">
        <el-form ref="ruleForm" v-loading="loading" :rules="ruleForm" label-position="left" label-width="100px">
          <el-form-item label="出入码" prop="name">
            <span>{{ formInfo.num }}</span>
          </el-form-item>
          <el-form-item label="家长姓名" prop="janitor_name">
            {{ formInfo.parentName }}
          </el-form-item>
          <el-form-item label="照片" prop="janitor_name">
            <img v-if="formInfo.user" :src="formInfo.user.avatar" alt="" class="img-class">
          </el-form-item>
          <el-form-item label="联系电话" prop="janitor_name">
            {{ formInfo.tel_num }}
          </el-form-item>
          <el-form-item label="学生" prop="janitor_name">
            {{ formInfo.studentName || '暂无' }}
          </el-form-item>
          <el-form-item label="申请入校时间" prop="janitor_name">
            {{ formInfo.enter_school_time }}
          </el-form-item>
          <el-form-item label="入校事项" prop="janitor_name">
            {{ ENTERSCHOOL[formInfo.admission_matters] }}
          </el-form-item>
          <el-form-item label="班主任" prop="janitor_name">
            {{ formInfo.teacherName }}
          </el-form-item>
          <el-form-item v-if="formInfo.teacher" label="班主任电话" prop="janitor_name">
            {{ formInfo.teacher.tel }}
          </el-form-item>
          <el-form-item label="进校时间" prop="janitor_name">
            {{ formInfo.actual_enter_school_time || '暂未入校' }}
          </el-form-item>
          <el-form-item label="出校时间" prop="janitor_name">
            {{ formInfo.actual_out_school_time || '尚未出校' }}
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { ENTERSCHOOL } from '@/views/constants'
export default {
  name: 'StudentDetail',
  props: {
    formInfo: Object,
    loading: Boolean,
    isAdd: Boolean
  },
  data() {
    return {
      ENTERSCHOOL,
      dialogImageUrl: '',
      dialogVisible: false,
      ruleForm: {
        name: [
          { required: true, message: '请输入租赁标的名称', trigger: 'blur' }
        ],
        company_id: [
          { required: true, message: '请选择所属公司', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择租赁标的类型', trigger: 'blur' }
        ],
        cost_center_code: [
          { required: true, message: '公司代码+0000+标的代码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.img-class {
  width: 200px;
  height: 200px;
}
</style>
